<template>
    <div>
      <Vheader title="0元领"></Vheader>
      <div class="v-wrapper" ref="freeCollar">
        <div class="v-container">
          <div class="freeCollar-list" v-for="item in freeCollar">
            <div class="freeCollar-img"><img src="../../common/images/shop3.jpg" alt=""></div>
            <div class="freeCollar-info">
              <div class="freeCollar-description">{{item.description}}</div>
              <div class="freeCollar-price">
                <p>￥{{item.price}}</p>
                <p>已领取{{item.count}}件</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header.vue'
  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        freeCollar:[
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
          {
            description:'室内观叶绿色植物花卉小盆栽优质栀子花净化空气',
            price:0,
            count:0
          },
        ]
      }
    },
    mounted(){
      this._initScroll();
    },
    methods: {
      _initScroll: function () {
        this.scroll = new BScroll(this.$refs.freeCollar,{click:true})
      }
    },
    components: {Vheader}
  }
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";
  .freeCollar-list{
    width: 100%;
    height: 260px;
    background-color: #FFFFFF;
    padding: 5px 8px;
    box-sizing: border-box;
    margin-bottom: 5px;
    .freeCollar-img{
      width: 100%;
      height: 200px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .freeCollar-info{
      width: 100%;
      height: 60px;
      display: flex;
      padding: 0 15px;
      box-sizing: border-box;
      .freeCollar-description{
        flex: 7;
        padding-top: 5px;
        font-size: 14px;
      }
      .freeCollar-price{
        flex: 3;
        text-align: right;
        p:first-child{
          font-size: 16px;
          color: red;
          padding-top: 5px;
        }
        p:last-child{
          font-size: 10px;
          color: #9a9a9a;
          padding-top: 10px;
        }
      }
    }
  }
</style>
